<script setup lang="ts">
import {} from './collapse'
</script>

<template>
  <el-aside>
    <el-scrollbar>
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="iscollapse"
        unique-opened
        @open="handleOpen"
        @close="handleClose"
        router
      >
        <!-- :collapse="false"不折叠 -->
        <!-- unique-opened在同一时间只能打开一个菜单 -->
        <!-- router跳转路由 -->
        <a href="/" class="logo"
          ><img src="@/assets/logo1.png" alt="" />
          <h1>哈尔滨信息工程学院</h1>
        </a>
        <el-sub-menu index="1">
          <template #title>
            <el-icon><IEpSetting /></el-icon><span>权限管理</span>
          </template>
          <el-menu-item index="/roles">
            <el-icon><IEpUser /></el-icon><span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/menus">
            <el-icon><IEpOperation /></el-icon><span>菜单列表</span>
          </el-menu-item>
          <el-menu-item index="/resources">
            <el-icon><IEpMessageBox /></el-icon><span>资源列表</span>
          </el-menu-item>
          <!-- 第二个二级菜单 -->
        </el-sub-menu>

        <el-sub-menu index="2">
          <template #title>
            <el-icon><IEpMessageBox /></el-icon><span>资源列表</span>
          </template>
          <el-menu-item index="/resources">
            <el-icon><IEpSetting /></el-icon><span>权限管理</span>
          </el-menu-item>
          <el-menu-item index="/roles">
            <el-icon><IEpUser /></el-icon><span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/menus">
            <el-icon><IEpOperation /></el-icon><span>菜单列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="3">
          <template #title>
            <el-icon><IEpUser /></el-icon><span>角色管理</span>
          </template>
          <el-menu-item index="/resources">
            <el-icon><IEpSetting /></el-icon><span>权限管理</span>
          </el-menu-item>
          <el-menu-item index="/menus">
            <el-icon><IEpOperation /></el-icon><span>菜单列表</span>
          </el-menu-item>
          <el-menu-item index="/resources">
            <el-icon><IEpMessageBox /></el-icon><span>资源列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="4">
          <template #title>
            <el-icon><IEpOperation /></el-icon><span>菜单列表</span>
          </template>
          <el-menu-item index="/resources">
            <el-icon><IEpSetting /></el-icon><span>权限管理</span>
          </el-menu-item>
          <el-menu-item index="/roles">
            <el-icon><IEpUser /></el-icon><span>角色管理</span>
          </el-menu-item>
          <el-menu-item index="/resources">
            <el-icon><IEpMessageBox /></el-icon><span>资源列表</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/resources"><span>课程管理</span></el-menu-item>
        <el-menu-item index="/advertisement"><span>广告列表管理</span></el-menu-item>
        <el-menu-item index="/advertising-space"><span>广告位管理</span></el-menu-item>
      </el-menu>
    </el-scrollbar>
  </el-aside>
</template>

<style lang="scss" scoped>
.el-aside {
  background-color: #134779;
  height: 100vh;
  width: auto;
}
.logo {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: black;
  height: 60px;
  margin: 20px;
  img {
    width: 40px;
    height: 40px;
  }
}
.el-menu {
  background-color: #134779;

  border-right: none;
  width: 200px;
  &.el-menu--collapse {
    width: 60px;
    &.h1 {
      display: none;
    }
  }
}
</style>
